<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="shortcut icon" href="./img/logo.jpg"/>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <!-- <link rel="stylesheet" href="./destop.css"> -->
    <link rel="stylesheet" href="./css/regist.css">
    <style>
        header {
            width: 100%;
            display: flex;
            height: 72px;
            background-color: white;
            font-size: 16px;
            position: fixed;
            /* top: 0; */
            border-bottom: 1px solid rgb(218, 218, 218);
            z-index: 10;
        }

        .header_left {
            width: 50%;
            font-weight: bolder;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            padding-right: 100px;
        }

        .header_left span:hover {
            cursor: pointer;
        }

        .header_left img {
            width: 40px;
            height: 40px;

        }



        .header_menu span {
            font-size: 25px;
            width: 40px;
            height: 40px;
        }

        .header_right {
            padding-right: 80px;
            width: 40%;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .header_right span {
            font-size: 22px;
        }

        .header_right span:hover {
            cursor: pointer;
        }

        .header_right input {
            width: 260px;
            height: 40px;
            text-indent: 0;
            /* height: 100%; */
            background-color: transparent;
            padding-left: 5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            /* border-style: none; */
            border: 1px solid gray;
            background-color: white;
        }


        .search {
            display: flex;
            justify-content: left;
            align-items: center;
            /* border-collapse: collapse; */
        }

        .header_right .search_a {
            display: block;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            width: 40px;
            height: 40px;
            border: 1px solid gray;
            border-left: 0;
        }

        .main {
            margin-top: 72px;
        }

        .img {
            width: 100%;
            height: 100%;
        }

        .img img {
            width: 100%;
            height: 100%;
        }
    </style>
    <style>
        body,
        html {
            overflow: auto
        }

        .regist_btn {
            width: 400px;
            height: 52px;
        }

        .df {
            display: flex;
        }

        .nb {
            display: flex;
        }
    </style>
</head>

<body>
    <header>
        <div class="header_left">
            <a href="index.html"><img src="./img/logo.jpg" alt=""></a>
            <span class="women">手机</span>
            <span class="men">电脑</span>
            <span class="child">平板</span>
            <span class="infant">智能设备</span>
        </div>
        <div class="header_right">
            <div class="search">
                <input type="text" placeholder="搜索商品">
                <span class="iconfont search_a">&#xe651;</span>
            </div>
            <span class="iconfont store">&#xe62f;</span>
            <span class="iconfont user">&#xe638;</span>
            <span class="iconfont fav">&#xe6de;</span>
            <span class="iconfont cart">&#xe631;</span>
        </div>

    </header>
    <!-- 下方 -->
    <div class="main">

        <p class="title">新用户注册</p>
        <form class="h-form label-top" onsubmit="return false;">
            <div class="h-form-group h-clearfix">
                <div>
                    <div class="h-combo-box undefined ">
                        <div tabindex="0" class="h-combo-box-editor">
                            <div class="h-combo-box-editor-inner location"><span>中国大陆</span></div>
                        </div>
                        <i class="icon "></i><input type="hidden" name="countryCode" value="CN">
                    </div>
                </div>
            </div>

            <div>
                <span>用户手机号</span>
                <div><input type="text" class="mobile" name="mobilephone" placeholder="用户手机号">
                </div>
                <span></span>
            </div>
            <div>
                <span>设置密码</span>
                <div><input type="text" class="password" name="mobilephone" placeholder="设置密码">
                </div>
                <span></span>
            </div>
            <div class="h-form-group h-clearfix">
                <div>
                    <div style="display: block;"><span>
                            短信验证码
                        </span></div>
                    <div class="nb">
                        <div class="h-text-box default" style="width: 350px;"><input type="text" class="code"
                                placeholder="短信验证码"></div>
                        <button type="button" class="send_code" style="width: 80px; height: 36px;">
                            发送验证码
                        </button>
                    </div>
                </div>
            </div>
            <div class="h-form-group h-clearfix">
                <div>
                    <div class="df"><span class="h-checkbox " style="width: 14px; height: 14px;"><input type="checkbox"
                                name="accept" class="check"></span>
                        <p>
                            我已阅读并同意《小米用户注册协议》和《小米隐私政策》</p>
                    </div>
                </div>

            </div>
            <br>
            <button type="submit" class="regist_btn" disabled>
                注册
            </button>
        </form>
    </div>

</body>
<script src="./js/common.js"></script>
<script src="./js/jQuery.js"></script>
<script src="./js/layui/layui.js"></script>
<script>
    let pwd = document.querySelector('.password')
    let mobile = document.querySelector('.mobile')
    let inputCode = document.querySelector(".code");
    let flag1 = flag2 = flag3 =flag4= false;
    // 发送验证码
    document.querySelector("body").addEventListener("click", function (e) {
        if (e.target.className == "send_code") {
            // document.querySelector(".send_code").onclick = function () {
            // 获取手机号输入框的值
            let mobile = document.querySelector(".mobile").value;
            let password = document.querySelector(".password").value;
            // 获取验证码的 值
            let code = document.querySelector(".code").value;
            // 验证码接口
            let xhr = new XMLHttpRequest;
            xhr.open("post", "http://phpclub.org.cn:8080/api/user/sendVerify")
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            xhr.send(`mobile=${mobile}&password=${password}`);
            xhr.onload = function () {
                let response = JSON.parse(xhr.responseText); //response: 客户端的返回值
                console.log(response.data.verifyCode); //返回的验证码
            }
        }

        // 手机号
        document.querySelector('.mobile').onblur = () => {
            if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(document.querySelector('.mobile').value)) {
                console.log("请正确输入手机号");
                // document.querySelector('.mobile').style.border = "2px solid red"
                // return false;
                flag1 = false;
            } else {
                console.log("手机号格式正确");
                // location.href = "index.html"
                flag1 = true;
            }
            changeStatus()
        }

        // 密码
        document.querySelector(".password").onblur = function () {

            if (password="") {
                flag4 = false;
                // document.querySelector(".password").style.border="2px solid red"
                 layer.open({
                    type:0,
                    title:"错误提示",
                    content:"密码不能为空"
                })
            } else {
                flag4 = true;
            }
            changeStatus()
        }
        // 判断验证码
        document.querySelector('.code').onblur = function () {

            // console.log(inputCode);
            if (inputCode.value!="") {
                // console.log("验证码正确");
                flag2 = true;
            } else {
                console.log("不能为空");
                flag2 = false;
                // document.querySelector(".code").style.border="2px solid red"
            }
            changeStatus()
        }
        // 勾选阅读框
        if (e.target.className == "check") {
            // document.querySelector(".check").onclick = function () {
            //   勾选check框
            if (document.querySelector(".check").checked == false) {
                // document.querySelector(".regist_btn").disabled = true;
                console.log("请阅读相关协议");
                flag3 = false;

            } else if (document.querySelector(".check").checked == true) {
                console.log('已勾选');
                // document.querySelector(".regist_btn").disabled = false;
                flag3 = true;
            }
            changeStatus()


        }
    })

    function changeStatus() {
        var btn = document.querySelector('.regist_btn');
        (flag3 && flag2 && flag1&&flag4) ? (btn.disabled = false) : (btn.disabled = true)
    }

    
    document.querySelector(".regist_btn").onclick = function () {

        let xhr = new XMLHttpRequest;
        xhr.open("post", "http://phpclub.org.cn:8080/api//user/register")
        xhr.setRequestHeader("Content-type", "application/json")
        xhr.send(JSON.stringify({
            mobile: mobile.value,
            password: pwd.value,
            verifyCode: inputCode.value
        }));
        xhr.onload = function () {

            let response = JSON.parse(xhr.responseText); //response: 客户端的返回值
            if (response.code !=0){
                // layer.msg属于layui框架内置所封装的功能
                layer.open({
                            type:0,
                            title:"错误信息提示",
                            content:"验证码输入有误"
                        });
            } else {
                location.href = "login.html"
                console.log("ok");
            }
            console.log(response);
            // console.log(22222)
            // location.href = "login.html"

        }

    }
</script>

</html>